<template>
<div>
  <div id="mapDiv" class="mapDiv" ref="mapDiv">
  </div>
</div>
</template>

<script>
import BaiduMap from '@/common/js/baidu-map'
// import {getCity} from '@/api/remote'
// import BMap from 'BMap'

export default {
  data() {
    return {
      zoom: '11',
      T: ''
    }
  },
  created() {
    this.startIcon = 'http://lbs.tianditu.gov.cn/images/bus/start.png'
    this.endIcon = 'http://lbs.tianditu.gov.cn/images/bus/end.png'
    this.myIcon = 'http://lbs.tianditu.gov.cn/images/bus/end.png'
  },
  mounted() {
    this.getPosition()
  },
  props: [
    'lat', 'long'
  ],
  watch: {
    '$route': 'getPosition',
    lat(to, form) {
      console.log(to)
      this.getPosition()
    }
  },
  methods: {
    getPosition() {
      BaiduMap.init().then((T) => {
        // debugger
        console.log(this.lat)
        // console.log(this.long)
        this.T = T
        this.zoom = 12
        this.map = new T.Map(this.$refs.mapDiv)// 初始化地图对象
        // 设置显示地图的中心点和级别
        this.map.centerAndZoom(new T.LngLat(103.79, 36.03), this.zoom)// 设置显示地图的中心点和级别
        // 创建图片对象
        var icon = new T.Icon({
          iconUrl: 'http://api.tianditu.gov.cn/img/map/markerA.png',
          iconSize: new T.Point(19, 27),
          iconAnchor: new T.Point(10, 25)
        })
        var marker = new T.Marker(new T.LngLat(this.lat, this.long), { icon: icon }) // 创建点
        this.map.addOverLay(marker) // 增加点
      }).catch(error => {
        console.log(error)
      })
    }

  }
}
</script>

<style scoped>
.mapDiv{
  width: 100%;
  height: 85vh;
}
</style>
